<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>

    <!--vue-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.10/vue.min.js"></script>

    <!-- 引入element-ui -->
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/theme-chalk/index.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/index.min.js"></script>

    <!--bootStrap-->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">

    <!--axios-->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.5/axios.min.js"></script>

</head>

<body>

<!-----------------公共头部------------------>
<div class=" navbar navbar-default navbar-fixed-top" id="publicHeader">
    <div class="container-fluid" >

        <div class="row">
            <div class="col-md-12 text-center" style="background-color: cornflowerblue; color: white">
                <a href="/" style="color: white">
                    <h3>蜗牛书店</h3>
                </a>
            </div>
        </div>

        <div class="row" style="margin-top: 10px;">

            <!--图书类型列表-->
            <div class="col-md-6">
                <ol class="breadcrumb">
                    <li v-for="type in bookTypeList" >
                        <a href="" @click.prevent="jumpTypeId(type)" >{{type.name}}</a>
                    </li>
                </ol>
            </div>

            <!--搜索框-->
            <div class="col-md-3">
                <form class="form-inline">
                    <div class="form-group">
                        <input type="text" name="searchName" class="form-control" placeholder="请输入搜索关键词">
                        <button class="btn btn-default" >搜索</button>
                    </div>
                </form>
            </div>

            <!--菜单项-->
            <div class="col-md-3">
                <a v-if="!currentUser" class="btn btn-default btn-sm" href="" @click.prevent="refreshPublicContent('/login')">登录</a>
                <a v-if="!currentUser" @click.prevent="refreshPublicContent('/register')" class="btn btn-default btn-sm" href="">注册</a>
                <span v-if="currentUser">欢迎您: {{currentUser}}</span>
                <a v-if="currentUser" class="btn btn-default btn-sm" href="">我的购物车</a>
                <a v-if="currentUser" class="btn btn-default btn-sm" href="">我的订单</a>
                <a v-if="currentUser" @click="logout" class="btn btn-default btn-sm" href="">退出</a>
            </div>

        </div>

    </div>

</div>

<!------------------内容区,动态切换内容------------------->
<div id="publicContent" style="margin-top: 150px;margin-bottom: 100px;">

    内容区,动态切换内容

</div>


<!---------------公共底部------------------>
<div class="navbar navbar-default navbar-fixed-bottom" id="publicFooter">

    <div class="row">
        <div class="col-md-12 text-center" style="background-color: cornflowerblue; color: white">
            <h3>Copyright © 1949-9999 woniuxy.com</h3>
        </div>
    </div>

</div>


</body>


<script>

    let publicHeaderVue = new Vue({
        el: "#publicHeader",
        data() {
            return {
                bookTypeList:[],
                currentUser:'',
            }
        },
        methods: {
            refreshPublicContent(url){

                axios.get(url+".html")
                    .then((response)=>{
                        // console.log(response.data)
                        document.getElementById("publicContent").innerHTML=response.data;

                        //需要确保html加载完成后再执行js代码
                        axios.get(url+".js")
                            .then((response)=> {
                                // console.log(response.data)
                                //执行js代码
                                eval(response.data)
                            })
                    })
            }
            ,
            initBookTypeList(){
                axios.postForm("/booktype/queryAll")
                    .then((response)=>{
                        publicHeaderVue.bookTypeList = response.data;
                    })
            },
            jumpTypeId(type){
                sessionStorage.setItem("bookType",JSON.stringify(type))
                publicHeaderVue.refreshPublicContent("/booksOfType")
            },
            initCurrentUser(){
                axios.postForm("/user/currentUser")
                    .then((response)=>{
                        publicHeaderVue.currentUser = response.data
                    })
            },
            logout(){
                axios.postForm("/user/logout")
            }
        },
        created() {
            console.log("publicHeaderVue 对象创建完成了")

            this.refreshPublicContent("/topN")

            this.initBookTypeList();

            this.initCurrentUser();
        }

    });


    let publicFooterVue = new Vue({
        el: "#publicFooter",
        data() {
            return {

            }
        },
        methods: {

        },
        created() {
            console.log("publicFooterVue 对象创建完成了")

        }

    });

</script>



</html>